<template>
  <!-- 魔方组件 -->
  <div class="cubeV3">
    <div class="cap-cube-wrap">
      <div class="cap-cube" v-if="!isBeingLayout">
        <div class="item">
          <img src="../assets/img/cubev3-l.jpg" alt="">
        </div>
        <div class="item">
          <img src="../assets/img/cubev3-r.jpg" alt="">
        </div>
      </div>
      <!-- 布局 -->
      <div class="decorate-cube"
           :style="{
             height:((value.show_method*1<4)?
              ((375-value.page_margin*2-value.border_width*value.show_method)/(value.show_method+1)):
              (375-value.page_margin*2))+'px',
             width:(375-value.page_margin*2)+'px',
             margin:'0 ' +value.page_margin+'px',
             'box-sizing':'border-box',
             overflow:'hidden'
            }"
           v-else>
        <template v-for="(item,idx) in value.sub_entry">
          <div class="cube-selected"
                :key="'info-'+idx"
                @click="selModeAreaClk(idx)"
                :style="{
                  'width': (375-value.page_margin*2-value.border_width*(item.width-1))/item.width+'px',
                  'height': (375-value.page_margin*2-value.border_width*(item.height-1))/item.height+'px',
                  'top': ((375-value.page_margin*2+value.border_width*(item.height-1))/value.layout_width)*item.y+'px',
                  'left': ((375-value.page_margin*2+
                    ((value.show_method==7&&idx>1)?value.border_width*1:value.border_width*(item.width-item.height+1))
                  )/value.layout_height)*item.x+'px'
                }">
            <img v-if="item.image_url" 
                  :src="item.image_url" 
                  alt="cubeImage" 
                  :width="(375-value.page_margin*2-value.border_width*(item.width-1))/item.width+'px'" 
                  :height="(375-value.page_margin*2-value.border_width*(item.height-1))/item.height+'px'">
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['value'],
  computed:{
    // 是否开始布局
    isBeingLayout(){
      let res=false;
      this.value.sub_entry.map(item=>{
        if(item.image_url!=''){
          res=true;
        }
      });
      return res;
    }
  },
  data(){
    return{

    }
  },
  created(){
    console.log(this.value)
  }
}
</script>

<style lang='less'>
.cubeV3{
  .cap-cube-wrap{
    position: relative;
    width: 100%;
    overflow: hidden;
    .cap-cube{
      position: relative;
      overflow: hidden;
      height: 200px;
      .item{
        float: left;
        width: 50%;
        img{
          width: 100%;
        }
      }
    }
  }
  .layout-box{
    position: relative;
    .item{
      position: absolute;
      img{
        object-fit: cover;
      }
    }
  }
  .decorate-cube{
    position: relative;
    width:375px;
    .cube-row{
      float: left;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .cube-item{
      background: #f8f8f8;
      border-left: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      cursor: pointer;
      text-align: center;
      box-sizing: border-box;
      &:first-child{
        border-top: 1px solid #e5e5e5;
      }
      &.item-selected{
        background: #e0edff;
        border-color: #155bd4;
      }
    }
    .cube-selected{
      position: absolute;
      background-color: #fff;
      border: 1px solid #ebedf0;
      text-align: center;
      color: #7d7e80;
      cursor: pointer;
      overflow: hidden;
      border: 0;
      &.cube-selected-click{
        background: #e0edff;
        border: 1px solid #155bd4;
        color: #155bd4;
        z-index: 2;
        cursor: auto;
        cursor: pointer;
      }
      .cube-selected-text{
        font-size: 12px;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        overflow: hidden;
      }
      img{
        height: inherit;
        vertical-align: baseline;
        object-fit: cover;
      }
    }
  }
}
</style>